site_8g/src/app/[locale]/_home/HomeSwiper.tsx

"use client";
import { FC, PropsWithChildren } from "react";

import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
interface Props {}
const urls = [
    // "https://images.hibigwin.com/9f/202405/mqletkfLwGeZkSH.jpg",
    "https://images.hibigwin.com/9f/202402/jLkCmSkItvcqlid.jpg",
    // "https://images.hibigwin.com/9f/202404/DDnZEhXKutDVIYn.jpg",
    // "https://images.hibigwin.com/9f/202406/wOBQjusbGUZkBMA.jpg",
    // "https://images.hibigwin.com/9f/202402/jLkCmSkItvcqlid.jpg",
    // "https://images.hibigwin.com/9f/202405/mqletkfLwGeZkSH.jpg",
    // "https://images.hibigwin.com/9f/202407/LPpEiiltiXwcdYz.jpg",
    // "https://images.hibigwin.com/9f/202406/veFfaahiTGAyDpy.jpg",
];
const HomeSwiper: FC<PropsWithChildren<Props>> = (props) => {
    return (
        <div style={{ height: "1.86rem" }}>
            <Swiper
                autoplay={{ delay: 2500 }}
                pagination={{ clickable: true }}
                spaceBetween={10}
                scrollbar={{ draggable: true }}
                slidesPerView={1}
                loop
                modules={[Pagination, Autoplay]}
            >
                {urls.map((url, index) => (
                    <SwiperSlide key={index}>
                        <img src={url} style={{ height: "1.86rem", width: "100%" }} alt={url} />
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    );
};

export default HomeSwiper;